<template>
    <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center" v-for="demo in list"
            :key="demo.id">
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" :id="demo.id" v-model="demo.done">
                <label class="form-check-label" :for="demo.id" :class="demo.done ? 'delect' : ''">{{ demo.task
                }}</label>
            </div>
            <span class="badge badge-success badge-pill" v-if="demo.done">完成</span>
            <span class="badge badge-warning badge-pill" v-else>没有完成</span>
        </li>
    </ul>
</template>

<script>
export default {
    name: "todoList",
    props: {
        list: {
            type: Array,
            required: true,
            default: []
        }
    }
}
</script>

<style lang="less" scoped>
.list-group {
    width: 500px !important;
}

.delect {
    text-decoration: line-through;
    color: gray;
    font-style: oblique;
    font-weight: 800;
}
</style>